<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报表管理 - 银行管理系统</title>
    <link rel="stylesheet" href="/static/style.css">
    <style>
        .report-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .report-tabs {
            display: flex;
            background: #f8f9fa;
            border-radius: 12px;
            padding: 8px;
            margin-bottom: 30px;
            gap: 8px;
        }
        
        .report-tab {
            flex: 1;
            padding: 12px 20px;
            background: transparent;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .report-tab.active {
            background: linear-gradient(135deg, #2d8cf0 0%, #74ebd5 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(45, 140, 240, 0.3);
        }
        
        .report-tab:hover:not(.active) {
            background: rgba(45, 140, 240, 0.1);
        }
        
        .report-content {
            display: none;
        }
        
        .report-content.active {
            display: block;
        }
        
        .report-filters {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .filter-row {
            display: flex;
            gap: 20px;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .filter-group label {
            font-weight: 600;
            color: #555;
            font-size: 14px;
        }
        
        .filter-group input, .filter-group select {
            padding: 8px 12px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 14px;
        }
        
        .filter-group input:focus, .filter-group select:focus {
            outline: none;
            border-color: #2d8cf0;
        }
        
        .report-actions {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .btn-generate {
            background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-generate:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(82, 196, 26, 0.3);
        }
        
        .report-results {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            min-height: 200px;
        }
        
        .report-chart {
            text-align: center;
            margin: 20px 0;
        }
        
        .report-chart img {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            border: 1px solid #dee2e6;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: 700;
            color: #2d8cf0;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        .table-responsive {
            overflow-x: auto;
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .table th, .table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
        }
        
        .table th {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            font-weight: 600;
            color: #495057;
        }
        
        .table tr:hover {
            background: #f8f9fa;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row !important;
            height: 180px;
        }
        
        .loading-icon {
            display: inline-block;
            width: 48px;
            height: 48px;
            border: 6px solid #f3f3f3;
            border-top: 6px solid #2d8cf0;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }
        
        .loading-text {
            display: inline-block !important;
            vertical-align: middle !important;
            white-space: nowrap !important;
            writing-mode: horizontal-tb !important;
            text-orientation: mixed !important;
            transform: none !important;
            font-size: 16px;
            letter-spacing: 2px;
            direction: ltr !important;
            unicode-bidi: plaintext !important;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
        }
        
        .empty-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .empty-state h3 {
            color: #333;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>📊 报表管理</h1>
            <nav class="nav">
                <a href="/admin/dashboard" class="nav-link">返回主页</a>
                <a href="/logout" class="nav-link">退出登录</a>
            </nav>
        </header>

        <main class="report-container">
            <!-- 报表类型选择 -->
            <div class="report-tabs">
                <button class="report-tab active" onclick="showReport('transaction')">📈 交易统计</button>
                <button class="report-tab" onclick="showReport('monthly')">📅 月末汇总</button>
                <button class="report-tab" onclick="showReport('customer')">👥 客户分析</button>
            </div>

            <!-- 交易统计报表 -->
            <div id="transaction-report" class="report-content active">
                <div class="report-filters">
                    <h3>📈 交易统计报表</h3>
                    <div class="filter-row">
                        <div class="filter-group">
                            <label>开始日期</label>
                            <input type="date" id="transaction-start-date">
                        </div>
                        <div class="filter-group">
                            <label>结束日期</label>
                            <input type="date" id="transaction-end-date">
                        </div>
                    </div>
                    <div class="report-actions">
                        <button class="btn-generate" onclick="generateTransactionReport()">生成报表</button>
                    </div>
                </div>
                <div id="transaction-results" class="report-results">
                    <div class="empty-state">
                        <div class="empty-icon">📊</div>
                        <h3>交易统计报表</h3>
                        <p>请选择日期范围并点击"生成报表"按钮</p>
                    </div>
                </div>
            </div>

            <!-- 月末汇总报表 -->
            <div id="monthly-report" class="report-content">
                <div class="report-filters">
                    <h3>📅 月末汇总报表</h3>
                    <div class="filter-row">
                        <div class="filter-group">
                            <label>年份</label>
                            <select id="monthly-year">
                                <option value="2024">2024年</option>
                                <option value="2025" selected>2025年</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <label>月份</label>
                            <select id="monthly-month">
                                <option value="1">1月</option>
                                <option value="2">2月</option>
                                <option value="3">3月</option>
                                <option value="4">4月</option>
                                <option value="5">5月</option>
                                <option value="6">6月</option>
                                <option value="7">7月</option>
                                <option value="8">8月</option>
                                <option value="9">9月</option>
                                <option value="10">10月</option>
                                <option value="11">11月</option>
                                <option value="12">12月</option>
                            </select>
                        </div>
                    </div>
                    <div class="report-actions">
                        <button class="btn-generate" onclick="generateMonthlyReport()">生成报表</button>
                    </div>
                </div>
                <div id="monthly-results" class="report-results">
                    <div class="empty-state">
                        <div class="empty-icon">📅</div>
                        <h3>月末汇总报表</h3>
                        <p>请选择年份和月份并点击"生成报表"按钮</p>
                    </div>
                </div>
            </div>

            <!-- 客户分析报表 -->
            <div id="customer-report" class="report-content">
                <div class="report-filters">
                    <h3>👥 客户分析报表</h3>
                    <p>分析客户分布、余额分布和活跃客户情况</p>
                    <div class="report-actions">
                        <button class="btn-generate" onclick="generateCustomerReport()">生成报表</button>
                    </div>
                </div>
                <div id="customer-results" class="report-results">
                    <div class="empty-state">
                        <div class="empty-icon">👥</div>
                        <h3>客户分析报表</h3>
                        <p>点击"生成报表"按钮查看客户分析数据</p>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        function showReport(type) {
            // 隐藏所有报表内容
            document.querySelectorAll('.report-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 移除所有标签的active类
            document.querySelectorAll('.report-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示选中的报表
            document.getElementById(type + '-report').classList.add('active');
            event.target.classList.add('active');
            
            // 清空所有报表结果区域，显示空状态
            clearAllResults();
        }

        function clearAllResults() {
            // 清空所有结果区域并显示空状态
            const resultIds = ['transaction-results', 'monthly-results', 'customer-results'];
            const emptyStates = {
                'transaction-results': {
                    icon: '📊',
                    title: '交易统计报表',
                    desc: '请选择日期范围并点击"生成报表"按钮'
                },
                'monthly-results': {
                    icon: '📅',
                    title: '月末汇总报表',
                    desc: '请选择年份和月份并点击"生成报表"按钮'
                },
                'customer-results': {
                    icon: '👥',
                    title: '客户分析报表',
                    desc: '点击"生成报表"按钮查看客户分析数据'
                }
            };
            
            resultIds.forEach(id => {
                const element = document.getElementById(id);
                if (element) {
                    const state = emptyStates[id];
                    element.innerHTML = `
                        <div class="empty-state">
                            <div class="empty-icon">${state.icon}</div>
                            <h3>${state.title}</h3>
                            <p>${state.desc}</p>
                        </div>
                    `;
                }
            });
        }

        function generateTransactionReport() {
            const startDate = document.getElementById('transaction-start-date').value;
            const endDate = document.getElementById('transaction-end-date').value;
            
            // 清空结果区域并显示加载状态
            document.getElementById('transaction-results').innerHTML = '<div class="loading"><div class="loading-icon"></div></div>';
            
            fetch('/admin/generate_transaction_report', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    start_date: startDate,
                    end_date: endDate
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displayTransactionReport(data.data);
                } else {
                    document.getElementById('transaction-results').innerHTML = `
                        <div class="empty-state">
                            <div class="empty-icon">❌</div>
                            <h3>生成失败</h3>
                            <p>${data.message}</p>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('transaction-results').innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">❌</div>
                        <h3>生成失败</h3>
                        <p>网络错误，请重试</p>
                    </div>
                `;
            });
        }

        function generateMonthlyReport() {
            const year = document.getElementById('monthly-year').value;
            const month = document.getElementById('monthly-month').value;
            
            // 清空结果区域并显示加载状态
            document.getElementById('monthly-results').innerHTML = '<div class="loading"><div class="loading-icon"></div></div>';
            
            fetch('/admin/generate_monthly_report', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    year: parseInt(year),
                    month: parseInt(month)
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displayMonthlyReport(data.data);
                } else {
                    document.getElementById('monthly-results').innerHTML = `
                        <div class="empty-state">
                            <div class="empty-icon">❌</div>
                            <h3>生成失败</h3>
                            <p>${data.message}</p>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('monthly-results').innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">❌</div>
                        <h3>生成失败</h3>
                        <p>网络错误，请重试</p>
                    </div>
                `;
            });
        }

        function generateCustomerReport() {
            // 清空结果区域并显示加载状态
            document.getElementById('customer-results').innerHTML = '<div class="loading"><div class="loading-icon"></div></div>';
            
            fetch('/admin/generate_customer_report', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displayCustomerReport(data.data);
                } else {
                    document.getElementById('customer-results').innerHTML = `
                        <div class="empty-state">
                            <div class="empty-icon">❌</div>
                            <h3>生成失败</h3>
                            <p>${data.message}</p>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('customer-results').innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">❌</div>
                        <h3>生成失败</h3>
                        <p>网络错误，请重试</p>
                    </div>
                `;
            });
        }

        function displayTransactionReport(data) {
            const resultsDiv = document.getElementById('transaction-results');
            
            let html = '<h3>📈 交易统计报表结果</h3>';
            
            if (data.chart) {
                html += `<div class="report-chart"><img src="data:image/png;base64,${data.chart}" alt="交易统计图表"></div>`;
            }
            
            if (data.table) {
                html += `<div class="table-responsive">${data.table}</div>`;
            }
            
            resultsDiv.innerHTML = html;
        }

        function displayMonthlyReport(data) {
            const resultsDiv = document.getElementById('monthly-results');
            
            let html = '<h3>📅 月末汇总报表结果</h3>';
            
            // 统计卡片
            if (data.summary && data.summary.length > 0) {
                html += '<div class="stats-grid">';
                data.summary.forEach(item => {
                    html += `
                        <div class="stat-card">
                            <div class="stat-value">${item.数值}</div>
                            <div class="stat-label">${item.统计项目}</div>
                        </div>
                    `;
                });
                html += '</div>';
            }
            
            // 图表
            if (data.chart) {
                html += `<div class="report-chart"><img src="data:image/png;base64,${data.chart}" alt="月末汇总图表"></div>`;
            }
            
            // 表格
            if (data.tables && Object.keys(data.tables).length > 0) {
                html += '<div class="report-tables">';
                Object.keys(data.tables).forEach(key => {
                    html += `<h4>${key}</h4><div class="table-responsive">${data.tables[key]}</div>`;
                });
                html += '</div>';
            }
            
            resultsDiv.innerHTML = html;
        }

        function displayCustomerReport(data) {
            const resultsDiv = document.getElementById('customer-results');
            
            let html = '<h3>👥 客户分析报表结果</h3>';
            
            // 统计卡片
            if (data.客户统计 && data.客户统计.length > 0) {
                html += '<div class="stats-grid">';
                data.客户统计.forEach(item => {
                    html += `
                        <div class="stat-card">
                            <div class="stat-value">${item.数值}</div>
                            <div class="stat-label">${item.统计项目}</div>
                        </div>
                    `;
                });
                html += '</div>';
            }
            
            // 图表
            if (data.chart) {
                html += `<div class="report-chart"><img src="data:image/png;base64,${data.chart}" alt="客户分析图表"></div>`;
            }
            
            // 表格
            if (data.tables && Object.keys(data.tables).length > 0) {
                html += '<div class="report-tables">';
                Object.keys(data.tables).forEach(key => {
                    html += `<h4>${key}</h4><div class="table-responsive">${data.tables[key]}</div>`;
                });
                html += '</div>';
            }
            
            resultsDiv.innerHTML = html;
        }

        // 设置默认日期
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date();
            const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
            
            document.getElementById('transaction-start-date').value = lastMonth.toISOString().split('T')[0];
            document.getElementById('transaction-end-date').value = today.toISOString().split('T')[0];
            
            document.getElementById('monthly-month').value = today.getMonth() + 1;
        });

        function fixLoadingText() {
            document.querySelectorAll('.loading-text').forEach(el => {
                el.style.transform = 'none';
                el.style.writingMode = 'horizontal-tb';
                el.style.textOrientation = 'mixed';
                el.style.direction = 'ltr';
                el.style.unicodeBidi = 'plaintext';
            });
        }
        setInterval(fixLoadingText, 200);
    </script>
</body>
</html> 